// @import "../vars/color.less";

@btn-name: btn;
@btn-border-radius: 2px;
@btn-border-default-color: #D7DDE4;

@btn-default-color: #1F2F3D;
@btn-default-bgcolor: #FFF;

@btn-info-bgcolor: @color-info;
@btn-primary-bgcolor: @color-primary;
@btn-success-bgcolor: @color-success;
@btn-danger-bgcolor: @color-danger;
@btn-warning-bgcolor: @color-warning;

a.@{btn-name}{
    text-decoration: none;
    color: inherit;
}
.@{btn-name}{
    color: @btn-default-color;
    background-image: none;
    background-color: @btn-default-bgcolor;
    display: inline-block;
    padding: 6px 12px;
    font-size: 14px;
    font: inherit;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    outline: none;
    border-radius: @btn-border-radius;
    border:solid 1px @btn-border-default-color;
    &:hover{
        background-color: #F7F7F7;
    }
    &:active,
    &.active,{
        box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    }
    &:disabled,
    &.disabled{
        cursor: not-allowed;
        filter: grayscale(70%);
    }
    
    &&-lg{
        padding: 10px 20px;
    }
    &&-sm{
        padding: 2px 4px;
    }

    &&-block{
        display: block;
        width: 100%;
    }

    .make-btn-theme(info);
    .make-btn-theme(primary);
    .make-btn-theme(success);
    .make-btn-theme(danger);
    .make-btn-theme(warning);

    &&-type-plain{
        color: @btn-default-color;
        background: @btn-default-bgcolor;
        border-color: @btn-border-default-color;
        .make-btn-type-plain-theme(info);
        .make-btn-type-plain-theme(primary);
        .make-btn-type-plain-theme(success);
        .make-btn-type-plain-theme(danger);
        .make-btn-type-plain-theme(warning);
    }
}

.make-btn-theme(@theme){
    
    &&-@{theme} {
        color: #fff;
        background-color: ~"@{btn-@{theme}-bgcolor}";
        border-color: ~"@{btn-@{theme}-bgcolor}";
        &:hover{
            background-color: ~"@{color-@{theme}-light}";
            border-color: ~"@{color-@{theme}-light}";
        }
    }
}
.make-btn-type-plain-theme(@theme){
    &.@{btn-name}-@{theme}{
        color: ~"@{btn-@{theme}-bgcolor}";
        border-color: ~"@{btn-@{theme}-bgcolor}";
        &:hover{
            border-color: ~"@{color-@{theme}-light}";
            color: #fff;
        }
    }
}
.@{btn-name}-block+.@{btn-name}-block{
    margin-top: 5px;
}
.@{btn-name}-group{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    
}
.@{btn-name}-group .@{btn-name}{
    position: relative;
    float: left;
    border-radius: 0;
    margin-left: -1px;
    &:first-child{
        margin-left: 0;
        border-top-left-radius: @btn-border-radius; 
        border-bottom-left-radius: @btn-border-radius;
    }
    &:last-child{

        border-top-right-radius: @btn-border-radius; 
        border-bottom-right-radius: @btn-border-radius;
    }
}
.@{btn-name}-group + .@{btn-name}-group {
    margin-top: 10px;
}
